<script>
import {create_qa, login} from "@/middleware/interface";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete} from "@element-plus/icons-vue";
import QrcodeVue from 'qrcode.vue'
import html2canvas from "html2canvas";
import {QUESTION_PREFIX} from "@/config";

export default {
  components: {Delete, QrcodeVue},
  data() {
    return {
      url_prefix: QUESTION_PREFIX,
      ret_qid: '',

      form_data: {
        title: "《弘扬优秀传统文化》讲座会议报名表",
        tip: "用于登记参加此会议的人员",
        questions: [
          {
            "title": "您的姓名",
            "prefix": "",
            "is_required": false,
          }, {
            "title": "您所在小学名称",
            "prefix": "北京",
            "is_required": true,
          }, {
            "title": "您所在年段班级",
            "prefix": "",
            "is_required": false,
          },
        ],
      }
    };
  },
  mounted() {

  },
  methods: {
    newQuestion() {
      this.form_data.questions.push({
        "title": "",
        "prefix": "",
        "is_required": false,
      })
    },
    deleteQuestion(index) {
      ElMessageBox.confirm(
          '是否删除此问题，该操作不可逆？',
          '请确认',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            this.form_data.questions.splice(index, 1)
          })
          .catch(() => {

          })
    },
    async submitForm() {
      if (this.form_data.title === "") {
        ElMessage.warning("请填写表单的标题")
        return
      }
      if (this.form_data.tip === "") {
        ElMessage.warning("请填写完整表单说明")
        return
      }
      if (this.form_data.questions.length === 0) {
        ElMessage.warning("请输入至少一个问题")
        return
      }
      var flag = false
      this.form_data.questions.forEach(
          (e, index) => {
            if (e["title"] === "") {
              ElMessage.warning(`问题${index + 1}的标题空为必填项`)
              flag = true
            }
          }
      )
      if (flag) {
        return
      }
      const res = await create_qa({
        content: JSON.stringify(this.form_data)
      })
      ElMessage.success("创建成功！")
      this.ret_qid = res["data"]["qid"]
    },
    copyUrl(qid) {
      this.$copyText(this.url_prefix + qid).then(
          res => {
            ElMessage.success("复制成功！")
          },
          err => {
          }
      )
    },
    copyQR() {
      const qrcodeElement = document.getElementById('qrcode-container');
      html2canvas(qrcodeElement).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL('image/png') // toDataURL: 图片格式转成 base64
        this.imgUrl = url
        //将图片下载到本地
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = '图片名' // 设置图片名称没有设置则为默认
        a.href = this.imgUrl // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      });
    }

  },
};
</script>

<template>
  <div class="w-full h-full flex flex-col items-center px-3">

    <div v-if="ret_qid"
         class="max-w-4xl bg-white w-full flex flex-col items-center my-3 mx-3 px-5 py-10 rounded-xl">
      <img src="../assets/img/done.svg" class="w-14 h-14" alt="">
      <div class="mt-5 font-bold text-xl text-center">已完成填写</div>
      <div class="w-full flex flex-col items-center max-w-md bg-gray-100 px-5 py-5 mt-5 rounded-xl">
        <div class="overflow-ellipsis w-full break-all text-center">{{ url_prefix }}{{ ret_qid }}</div>
        <div @click="copyUrl(ret_qid)"
             class=" hover:opacity-50 cursor-pointer select-none text-center px-5 py-1.5 bg-white mt-4 text-sm rounded font-bold">
          复制链接
        </div>
      </div>


      <div class="w-full flex flex-col items-center max-w-md bg-gray-100 px-5 py-5 pt-8 mt-5 rounded-xl">
        <div id="qrcode-container" class="mix-blend-darken">
          <qrcode-vue render-as="svg" class="" size="150" :value="url_prefix+ret_qid"
                      level="H"/>
        </div>
        <div @click="copyQR()"
             class=" hover:opacity-50 cursor-pointer select-none text-center px-5 py-1.5 bg-white mt-5 text-sm rounded font-bold">
          下载二维码
        </div>
      </div>


    </div>

    <div v-if="!ret_qid"
         class="moveLeftInAni max-w-4xl bg-white w-full my-3 flex justify-between mx-3 px-5 py-5 rounded-xl">
      <div class="font-bold w-16 mt-4" style="font-size: 16px;">标题</div>
      <div class="flex-1">
        <input class="w-full px-4 py-4 border rounded-xl" v-model="form_data.title" placeholder="请输入表单的标题"/>
        <input class="w-full px-4 py-4 mt-3 border rounded-xl" v-model="form_data.tip" placeholder="关于表单的说明"/>
      </div>
    </div>

    <div v-if="!ret_qid" v-for="(item, index) in form_data.questions"
         class="moveLeftInAni max-w-4xl bg-white w-full flex justify-between mx-3 my-3 px-5 py-5 rounded-xl">
      <div class="font-bold w-16" style="font-size: 16px;">问题{{ index + 1 }}</div>
      <div class="flex-1">
        <div class="w-full flex items-center justify-between mb-5">
          <div class="" style="font-size: 16px;">标题</div>
          <el-icon @click="deleteQuestion(index)" class="hover:opacity-50 transition cursor-pointer" size="18px">
            <Delete/>
          </el-icon>
        </div>
        <input class="w-full px-4 py-4 border rounded-xl" v-model="item.title" placeholder="请输入表单的标题"/>

        <div class=" mt-5 mb-1" style="font-size: 16px;">提示词前缀</div>
        <input class="w-full px-4 py-4 mt-3 border rounded-xl" v-model="item.prefix"
               placeholder="请输入问题的提示词前缀"/>
        <div class="flex items-center mt-5">
          <div class="mr-4">是否必填</div>
          <el-switch v-model="item.is_required" active-color="#0e1ad5"/>
        </div>

      </div>
    </div>

    <div v-if="!ret_qid" class="flex items-center mt-10 pb-14 scroll-container">
      <div
          @click="newQuestion()"
          class="px-8 py-3.5 bg-white rounded font-bold text-center cursor-pointer select-none transition hover:shadow-xl border border-gray-300">
        +新建问题
      </div>
      <div class="w-6"></div>
      <div @click="submitForm()"
           class="px-8 py-3.5 rounded text-white text-center font-bold cursor-pointer select-none transition hover:shadow-xl"
           style="background: #0a1ade">完成并发布
      </div>
    </div>

  </div>
</template>

<style scoped>
.moveLeftInAni {
  transform: translateX(-300px);
  opacity: 0.3;
  animation: moveLeftIn 0.3s ease forwards;
}

@keyframes moveLeftIn {
  from {
    transform: translateX(-300px);
    opacity: 0.3;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }

}

</style>
